<template>
	<view>
		<!-- 支付弹框 -->
		<u-popup :show="payShow" @close="payShow = false">
			<view class="fubox">
				<view class="futitle">
					支付方式
				</view>
				<radio-group @change="radioChange">
					<label class="lbai" v-for="(item, index) in items" :key="item.value">
						<image :src="item.pic" class="lpic" mode=""></image>
						<view class="ltxt">{{item.name}} <text v-if="item.value == 2">{{'余额：' + userInfo.wallet}}</text>
						</view>
						<radio style="transform: scale(0.8);" color="#45C4B0" :value="item.value"
							:checked="index === current" />
					</label>
				</radio-group>
				<view class="lizhi">
					<view class="quezhi" @click="paySubmit">
						确认支付
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 粮币充值 -->
		<u-popup :show="rechargeShow" @close="rechargeShow = false">
			<view class="fubox">
				<view class="bititle">
					粮币充值
				</view>
				<view class="jinbox">
					<view class="jinli" v-for="(item , index) in list" :key="index"
						:class="{'jactive': index == rechargeIndex}" @click="rechargeTab(index)">
						<image :src="'/images/jk.png' | formatImgUrl" v-if="index == rechargeIndex" class="jiao"
							mode="">
						</image>
						<image :src="'/images/jl.png' | formatImgUrl" v-if="index == rechargeIndex" class="duih"
							mode="">
						</image>
						<view class="jintop">
							<view class="jintxt">
								{{item.num}}
							</view>
							<image :src="'/images/jn.png' | formatImgUrl" class="jinpic" mode=""></image>
						</view>
						<view class="yuan">
							{{item.pay}}元
						</view>
					</view>

				</view>
				<view class="shubox" v-if="rechargeValueShow">
					<view class="shutitle">
						充值金额
					</view>
					<input type="digit" class="shuput" placeholder="最低充值1.00" maxlength="10" v-model="form.price">
					<view class="shutitle">
						元
					</view>
				</view>
				<view class="lizhi">
					<view class="quezhi" @click="paySubmit">
						充值支付
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "payPop",
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				// 支付弹框
				payShow: false,
				items: [{
						value: '4',
						pic: this.$options.filters.formatImgUrl('/images/zfb.png'),
						name: '支付宝支付',
					},,{
						value: '3',
						pic: this.$options.filters.formatImgUrl('/images/wei.png'),
						name: '微信支付',
					},
					{
						value: '2',
						pic: this.$options.filters.formatImgUrl('/images/jn.png'),
						name: '粮币支付'
					}
				],
				current: 0,

				// 粮币充值
				rechargeShow: false,
				list: [],
				rechargeIndex: 0,
				rechargeValueShow: false
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			paySubmit() {

			},
			getList() {
				this.$api.default.request('user/exchangeList', {
					type: 1
				}).then((res) => {
					if (res.code) {
						this.list = res.data
						this.list.push({
							id: 1,
							num: '任意数量',
							pay: '自定义金额'
						})
					}
				})
			},
			rechargeTab(index) {
				this.rechargeIndex = index
				this.rechargeValueShow = (index == this.list.length - 1) ? true : false
			},

		}
	}
</script>

<style>

</style>